<template>
<Page>
    <template #hd>
        <!-- 搜索 -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="卡券ID">
                <el-input placeholder="请输入卡券ID" clearable />
            </el-form-item>
            <el-form-item label="分组ID">
                <el-input placeholder="请输入分组ID" clearable />
            </el-form-item>
            <el-form-item label="名称">
                <el-input placeholder="请输入卡券名称" clearable />
            </el-form-item>
            <el-form-item label="类型">
                <el-select
                    placeholder="类型"
                    clearable
                >
                    <el-option label="优惠券" value="优惠券" />
                    <el-option label="储蓄卡" value="储蓄卡" />
                    <el-option label="计次卡" value="计次卡" />
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select
                    placeholder="状态"
                    clearable
                >
                    <el-option label="启用" value="启用" />
                    <el-option label="禁用" value="禁用" />
                </el-select>
            </el-form-item>
            <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="primary">重置</el-button>
            <el-button @click="addGroupListShow = true">+ 新增</el-button>
            </el-form-item>
        </el-form>
    </template>
    <template #ct>
        <!-- 列表 -->
        <el-table :data="getListShow" style="width: 100%">
            <el-table-column prop="id" label="卡券ID" />
            <el-table-column prop="icon" label="图标" >
                <template #default="{row}">
                    <img :src="row.icon" alt="" width="50" height="50" >
                </template>
            </el-table-column>
            <el-table-column prop="coupontname" label="卡券名称" />
            <el-table-column prop="coupongroup" label="分组" />
            <el-table-column prop="coupontype" label="类型" />
            <el-table-column  label="有效期" align="center">
                    <template #default="{row}">
                        <span>{{ setData(row.stime) }}</span>
                        <span>{{ setData(row.etime) }}</span>
                    </template>
            </el-table-column>
            <el-table-column  label="创建时间" align="center">
                    <template #default="{row}">
                        <span>{{ setData(row.createdAt) }}</span>
                    </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{row}">
                    <span  class="edit" @click="grantCoupon({...row})">+发券</span>
                    <span @click="handleShowEdit({...row})" class="edit">
                    <span class="iconfont icon-xiugai"></span>
                        修改
                    </span>
                    <el-popconfirm title="确定删除吗?" @confirm="confirmEvent(row.id)">
                        <template #reference>
                            <span class="edit">
                            <span class="iconfont icon-shanchu"></span>
                                删除
                            </span>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <template #ft>
        <el-pagination
            :page-sizes="[10, 30, 50, 100]"
            :default-page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            background
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
         />
    </template>
</Page>
<!-- 新增弹窗 -->
<el-dialog v-model="addGroupListShow" title="新增卡券" width="720" :destroy-on-close="true">
<el-form :model="couponList">
    <el-form-item label="卡券类型" :label-width="100">
        <el-select
            clearable
            v-model="couponList.coupontype"
        >
            <el-option label="优惠券" value="优惠券"/>
            <el-option label="储蓄卡" value="储蓄卡" />
            <el-option label="计次卡" value="计次卡" />
        </el-select>
    </el-form-item>
    <el-form-item label="卡券分组" :label-width="100">
        <el-select
            clearable
            v-model="couponList.coupongroup"
        >
        <el-option
            v-for="(item,index) in options"
            :key="index"
            :label="item"
            :value="item"
       />
        </el-select>
    </el-form-item>
    <el-row>
        <el-col :span="14">
            <el-form-item label="卡券名称" :label-width="100">
                <el-input v-model="couponList.coupontname" />
            </el-form-item>
        </el-col>
    </el-row>
    <el-form-item label="有效期" :label-width="100">
      <el-col :span="11">
        <el-date-picker
          v-model="couponList.stime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
        <span class="text-gray-500">至</span>
      <el-col :span="11">
        <el-date-picker
          v-model="couponList.etime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
   <template v-if="couponList.coupontype==='优惠券'">
        <el-row>
            <el-col :span="12">
                <el-form-item label="卡券面额" :label-width="100">
                    <el-input v-model="couponList.facevalue" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="发放方式" :label-width="100">
            <el-radio-group v-model="couponList.mode" class="ml-4">
                <el-radio label="1" size="large">后台发放</el-radio>
                <el-radio label="2" size="large">前台领取</el-radio>
                <el-radio label="3" size="large">线下发放</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-row>
            <el-col :span="14">
                <el-form-item label="发放总数量" :label-width="100">
                    <el-input v-model="couponList.total" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="14">
                <el-form-item label="满多少可用" :label-width="100">
                    <el-input v-model="couponList.threshold" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="允许转赠好友" :label-width="100">
            <el-radio-group v-model="couponList.bestow" class="ml-4">
                <el-radio label="1" size="large">允许</el-radio>
                <el-radio label="2" size="large">不允许</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="适用商品" :label-width="100">
            <el-radio-group v-model="couponList.apply" class="ml-4">
                <el-radio label="1" size="large">全部店铺</el-radio>
                <el-radio label="2" size="large">指定店铺</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-row>
            <el-col :span="14">
                <el-form-item label="每人最多拥有数量" :label-width="130">
                    <el-input v-model="couponList.full" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="14">
                <el-form-item label="领取所需积分" :label-width="100">
                    <el-input v-model="couponList.consumption" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="14">
                <el-form-item label="领取码" :label-width="100">
                    <el-input v-model="couponList.code" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="会员等级" :label-width="100">
            <el-select
                clearable
                v-model="couponList.grade"
            >
                <el-option label="普通会员" value="普通会员"/>
                <el-option label="铜牌会员" value="铜牌会员" />
                <el-option label="银牌会员" value="银牌会员" />
                <el-option label="金牌会员" value="金牌会员" />
                <el-option label="钻牌会员" value="钻牌会员" />
            </el-select>
        </el-form-item>
        <el-form-item label="使用专项" :label-width="100">
            <el-select
                clearable
                v-model="couponList.special"
            >
                <el-option label="升级会员等级专用" value="升级会员等级专用"/>
                <el-option label="到店收银买单专用" value="到店收银买单专用" />
            </el-select>
        </el-form-item>
   </template>
   <template v-else-if="couponList.coupontype==='储蓄卡'">
        <el-form-item label="预存规则" :label-width="100">
           <el-button @click="num++"> +添加 </el-button>
        </el-form-item>
        <template v-for="item of num">
            <el-row>
            <el-col :span="11">
                <el-form-item label="" :label-width="100">
                    <el-input v-model="couponList.prestore" placeholder="请输入实际支付金额" />
                </el-form-item>
            </el-col>
            <el-col :span="1"><span class="lh">到账</span></el-col>
            <el-col :span="8">
                <el-form-item label="">
                    <el-input v-model="couponList.prestoreplus" placeholder="请输入实际到账金额" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <span class="close" @click="num--">-</span>
            </el-col>
        </el-row>
        </template>
   </template>
   <template v-else>
        <el-row>
            <el-col :span="12">
                <el-form-item label="计次次数" :label-width="100">
                    <el-input class="description" v-model="couponList.frequency" />
                </el-form-item>
            </el-col>
        </el-row>
   </template>
    <el-form-item label="适用店铺" :label-width="100">
        <el-select
            clearable
            v-model="couponList.shop"
        >
            <el-option label="海口解放店" value="海口解放店"/>
            <el-option label="海口永万路店" value="海口永万路店" />
            <el-option label="海口长彤路店" value="海口长彤路店" />
            <el-option label="海口国库路店" value="金牌会员" />
            <el-option label="海口海甸岛店" value="海口海甸岛店" />
        </el-select>
    </el-form-item>
    <el-form-item label="图标" :label-width="100">
        <el-upload
            class="avatar-uploader"
            action="http://www.wzsqyg.com/attachment/upload"
            :show-file-list="false"
            :on-success="handleUploadOk"
            :before-upload="beforeAvatarUpload"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
    </el-form-item>
    <el-form-item label="描述信息" :label-width="100">
        <el-input class="description" type="textarea" :row="10" v-model="couponList.description" />
    </el-form-item>
    <el-form-item label="后台备注" :label-width="100">
        <el-input type="textarea" v-model="couponList.remark" />
    </el-form-item>
</el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button type="primary" @click="addCouponOK">确认</el-button>
        <el-button @click="addGroupListShow = false">
            取消
        </el-button>
        </span>
    </template>
</el-dialog>
<!-- 编辑弹窗 -->
<el-dialog v-model="editGroupListShow" title="新增卡券" width="720" :destroy-on-close="true">
<el-form :model="editcouponList">
    <el-form-item label="卡券类型" :label-width="100">
        <el-select
            clearable
            v-model="editcouponList.coupontype"
        >
            <el-option label="优惠券" value="优惠券"/>
            <el-option label="储蓄卡" value="储蓄卡" />
            <el-option label="计次卡" value="计次卡" />
        </el-select>
    </el-form-item>
    <el-form-item label="卡券分组" :label-width="100">
        <el-select
            clearable
            v-model="editcouponList.coupongroup"
        >
        <el-option
            v-for="(item,index) in this.$store.state.options"
            :key="index"
            :label="item"
            :value="item"
       />
        </el-select>
    </el-form-item>
    <el-row>
        <el-col :span="14">
            <el-form-item label="卡券名称" :label-width="100">
                <el-input v-model="editcouponList.coupontname" />
            </el-form-item>
        </el-col>
    </el-row>
    <el-form-item label="有效期" :label-width="100">
      <el-col :span="11">
        <el-date-picker
          v-model="editcouponList.stime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
        <span class="text-gray-500">至</span>
      <el-col :span="11">
        <el-date-picker
          v-model="editcouponList.etime"
          type="datetime"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
   <template v-if="editcouponList.coupontype==='优惠券'">
        <el-row>
            <el-col :span="12">
                <el-form-item label="卡券面额" :label-width="100">
                    <el-input v-model="editcouponList.facevalue" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="发放方式" :label-width="100">
            <el-radio-group v-model="editcouponList.mode" class="ml-4">
                <el-radio label="1" size="large">后台发放</el-radio>
                <el-radio label="2" size="large">前台领取</el-radio>
                <el-radio label="3" size="large">线下发放</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-row>
            <el-col :span="14">
                <el-form-item label="发放总数量" :label-width="100">
                    <el-input v-model="editcouponList.total" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="14">
                <el-form-item label="满多少可用" :label-width="100">
                    <el-input v-model="editcouponList.threshold" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="允许转赠好友" :label-width="100">
            <el-radio-group v-model="editcouponList.bestow" class="ml-4">
                <el-radio label="1" size="large">允许</el-radio>
                <el-radio label="2" size="large">不允许</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="适用商品" :label-width="100">
            <el-radio-group v-model="editcouponList.apply" class="ml-4">
                <el-radio label="1" size="large">全部店铺</el-radio>
                <el-radio label="2" size="large">指定店铺</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-row>
            <el-col :span="14">
                <el-form-item label="每人最多拥有数量" :label-width="130">
                    <el-input v-model="editcouponList.full" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="14">
                <el-form-item label="领取所需积分" :label-width="100">
                    <el-input v-model="editcouponList.consumption" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="14">
                <el-form-item label="领取码" :label-width="100">
                    <el-input v-model="editcouponList.code" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="会员等级" :label-width="100">
            <el-select
                clearable
                v-model="editcouponList.grade"
            >
                <el-option label="普通会员" value="普通会员"/>
                <el-option label="铜牌会员" value="铜牌会员" />
                <el-option label="银牌会员" value="银牌会员" />
                <el-option label="金牌会员" value="金牌会员" />
                <el-option label="钻牌会员" value="钻牌会员" />
            </el-select>
        </el-form-item>
        <el-form-item label="使用专项" :label-width="100">
            <el-select
                clearable
                v-model="editcouponList.special"
            >
                <el-option label="升级会员等级专用" value="升级会员等级专用"/>
                <el-option label="到店收银买单专用" value="到店收银买单专用" />
            </el-select>
        </el-form-item>
   </template>
   <template v-else-if="editcouponList.coupontype==='储蓄卡'">
        <el-form-item label="预存规则" :label-width="100">
           <el-button @click="num++"> +添加 </el-button>
        </el-form-item>
        <template v-for="item of num">
            <el-row>
            <el-col :span="11">
                <el-form-item label="" :label-width="100">
                    <el-input v-model="editcouponList.prestore" placeholder="请输入实际支付金额" />
                </el-form-item>
            </el-col>
            <el-col :span="1"><span class="lh">到账</span></el-col>
            <el-col :span="8">
                <el-form-item label="">
                    <el-input v-model="editcouponList.prestoreplus" placeholder="请输入实际到账金额" />
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <span class="close" @click="num--">-</span>
            </el-col>
        </el-row>
        </template>
   </template>
   <template v-else>
        <el-row>
            <el-col :span="12">
                <el-form-item label="计次次数" :label-width="100">
                    <el-input class="description" v-model="editcouponList.frequency" />
                </el-form-item>
            </el-col>
        </el-row>
   </template>
    <el-form-item label="适用店铺" :label-width="100">
        <el-select
            clearable
            v-model="editcouponList.shop"
        >
            <el-option label="海口解放店" value="海口解放店"/>
            <el-option label="海口永万路店" value="海口永万路店" />
            <el-option label="海口长彤路店" value="海口长彤路店" />
            <el-option label="海口国库路店" value="金牌会员" />
            <el-option label="海口海甸岛店" value="海口海甸岛店" />
        </el-select>
    </el-form-item>
    <el-form-item label="图标" :label-width="100">
        <el-upload
            class="avatar-uploader"
            action="http://www.wzsqyg.com/attachment/upload"
            :show-file-list="false"
            :on-success="handleUploadOk"
            :before-upload="beforeAvatarUpload"
        >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
    </el-form-item>
    <el-form-item label="描述信息" :label-width="100">
        <el-input class="description" type="textarea" :row="10" v-model="editcouponList.description" />
    </el-form-item>
    <el-form-item label="后台备注" :label-width="100">
        <el-input type="textarea" v-model="editcouponList.remark" />
    </el-form-item>
</el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button type="primary" @click="editGroupA">确认</el-button>
        <el-button @click="editGroupListShow = false">
            取消
        </el-button>
        </span>
    </template>
</el-dialog>
<!-- 发放卡券弹窗 -->
<el-dialog v-model="grantShow" title="发放卡券" width="658">
    <el-form :model="memberCouponList">
        <el-form-item label="卡券名称" :label-width="100">
            <el-input v-model="memberCouponList.couponname" disabled />
        </el-form-item>
        <el-form-item label="手机号" :label-width="100">
            <el-input v-model="memberCouponList.phone" />
        </el-form-item>
        <el-form-item label="发放数量" :label-width="100">
            <el-input v-model="memberCouponList.count" />
        </el-form-item>
        <el-form-item label="备注信息" :label-width="100">
            <el-input v-model="memberCouponList.remark" type="textarea" />
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
        <el-button type="primary" @click="addCouponList">确认</el-button>
        <el-button @click="grantShow = false">
            取消
        </el-button>
        </span>
    </template>
</el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ElMessage, dayjs } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import type { UploadProps } from 'element-plus';
import { addCoupon, getCouponList, delCoupon, updateCoupon } from '@/api/coupon';
import { GroupList } from '@/api/group';
import { addmembership } from '@/api/membership';
import { getmemberList } from '@/api/addmember';

export default defineComponent({
    data() {
        return {
            grantShow: false,
            imageUrl: '',
            addGroupListShow: false,
            couponList: {
                coupontype: '优惠券', //卡券类型
                coupongroup: '', //卡券分组
                coupontname: '', //卡券名称
                stime: '', //有效期-开始时间
                etime: '', //有效期-结束时间
                facevalue: '', //卡券面额
                mode: '', // 发放方式
                total: '', // 发行总数量
                threshold: '', // 满多少可用
                bestow: '', // 是否允许转赠
                apply: '', // 适用商品
                full: '', // 每人最多拥有数量
                consumption: '', // 领取所需积分
                code: '', // 领取码
                grade: '', // 会员等级
                special: '', // 使用专项
                shop: '', // 适用店铺
                icon: '', // 图标
                description: '', // 描述信息
                remark: '', //后台备注
                prestore: '', //实际支付金额
                prestoreplus: '', //实际到账金额
                frequency: 0, //计次次数
            },
            num: 1,
            getListShow: [],
            page: 1,
            limit: 30,
            total: 0,
            editGroupListShow: false,
            editcouponList: {
                coupontype: '优惠券', //卡券类型
                coupongroup: '', //卡券分组
                coupontname: '', //卡券名称
                stime: '', //有效期-开始时间
                etime: '', //有效期-结束时间
                facevalue: '', //卡券面额
                mode: '', // 发放方式
                total: '', // 发行总数量
                threshold: '', // 满多少可用
                bestow: '', // 是否允许转赠
                apply: '', // 适用商品
                full: '', // 每人最多拥有数量
                consumption: '', // 领取所需积分
                code: '', // 领取码
                grade: '', // 会员等级
                special: '', // 使用专项
                shop: '', // 适用店铺
                icon: '', // 图标
                description: '', // 描述信息
                remark: '', //后台备注
                prestore: '', //实际支付金额
                prestoreplus: '', //实际到账金额
                frequency: 0, //计次次数
            },
            options: [],
            memberCouponList: {
                verification: '', //核销码
                memberid: '', //会员ID
                phone: '', //手机号
                name: '', //会员名称
                coupontype: '', //卡券类型
                couponname: '', //卡券名称
                face: '', //面额
                balance: '', //余额
                state: 1, //状态
                remark: '', //备注
                count: 1, //发行数量
            },
            memberList: [],
        };
    },
    methods: {
        beforeAvatarUpload(rawFile: any): boolean {
            console.log('rawFile', rawFile);
            if (!rawFile.type.includes('image')) {
                this.$message.warning('只能上传图片文件');
                return false;
            }
        },
        handleUploadOk(response: any, uploadFile: any) {
            console.log('response', response);
            this.couponList.icon = response.msg;
            this.imageUrl = URL.createObjectURL(uploadFile.raw!);
        },
        // 处理分页
        handleSizeChange(val: number) {
            console.log('val', val);
            this.limit = val;
            this.getList();
        },
        handleCurrentChange(val: number) {
            this.page = val;
            this.getList();
        },
        // 获取分组列表
        async getList() {
            const $skip = (this.page - 1) * this.limit;
            const res = await getCouponList({
                $skip,
                $limit: this.limit,
            });
            const res1 = await GroupList({
                $skip,
                $limit: this.limit,
            });
            const res2 = await getmemberList({
                $skip,
                $limit: this.limit,
            });
            this.memberList = res2.data.data;
            this.getListShow = res.data.data;
            this.total = res.data.total;
            for (let key in res1.data.data) {
                this.options.push(res1.data.data[key].groupname);
                // console.log('66666666666', res1.data.data[key].groupname);
            }
            // for (let key in res2.data.data) {
            //     console.log('777777777777', res2.data.data[key]);
            //     this.memberList.push(res2.data.data[key]);
            // }
            console.log('数组', this.memberList);
        },
        // 添加
        async addCouponOK() {
            let res = await addCoupon(this.couponList);
            const { status } = res;
            if (status === 201) {
                this.$message.success('添加成功');
                this.addGroupListShow = false;
                this.getList();
            }
        },
        // 时间格式化方法
        setData(t:string) {
            const newtime = dayjs(t).format('YYYY-MM-DD HH:mm'); // 初始化日期时间
            return newtime;
        },
        // 修改按钮
        handleShowEdit(row: any) {
            this.editcouponList = row;
            // console.log('点击了修改', this.editGroup);
            this.editGroupListShow = true;
        },
        // 编辑的确认按钮
        async editGroupA() {
            const { id, ...postdata } = this.editcouponList;
            const res = await updateCoupon(id, postdata);
            const { status } = res;
            if (status === 200) {
                this.$message.success('修改成功');
                this.editGroupListShow = false;
                this.getList();
            }
        },
        // 气泡确认按钮
        async confirmEvent(id:number) {
            console.log('点击了确认', id);
            const res = await delCoupon(id);
            console.log('删除', res);
            this.$message.success('删除成功');
            this.getList();
        },

        // 发券
        grantCoupon(row: any) {
            this.memberCouponList.couponname = row.coupontname;
            console.log('数组', this.memberList);
            // for (let key in this.memberList) {
            //     console.log('=======', this.memberList[key].phone);
            // }
            console.log('this.grantList', this.memberCouponList.couponname);
            this.grantShow = true;
        },
        // 发券确认按钮
        async addCouponList() {
            let res = this.memberCouponList;
            let flag = false;
            console.log('手机号', res.phone);
            // 遍历会员手机号
            for (let key in this.memberList) {
                console.log('=======', this.memberList[key].phone);
                if (this.memberList[key].phone === res.phone) {
                    flag = true;
                    console.log(this.memberList[key].phone === res.phone, key, this.memberList[key].coupontype);
                    this.memberCouponList.name = this.memberList[key].name;
                    this.memberCouponList.memberid = this.memberList[key].id;
                }
            }
            for (let key in this.editcouponList) {
                if (flag) {
                    console.log('7777777777', this.editcouponList);
                    this.memberCouponList.coupontype = this.editcouponList[key].coupontype;
                }
            }
            let res1 = await addmembership(this.memberCouponList);
            const { status } = res1;
            if (status === 201) {
                this.$message.success('发券成功');
                this.grantShow = false;
            }
        },
    },
    mounted() {
        this.getList();
    },

});
</script>

<style scoped>
@import '../../assets/search.scss';
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}
.lh{
    line-height: 33px;
}
.close{
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 15px;
    position: relative;
    top: 6px;
    left: 6px;
    cursor: pointer;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}
</style>
